<template>
  <div>
    <div v-show="shopData.name">
      <dish-header :shopMess="shopData"></dish-header>
      <div class="foods-list">
        <foods-list :shopList="shopData.menu" @handleAdd="handleAdd"></foods-list>
      </div>
      <div class="nav" v-if="shopData.shopinfo">
        <shop-menu></shop-menu>
        <shop-cart :shopData="shopData" ref="shopcart"></shop-cart>
        <shop-waiter></shop-waiter>
      </div>
      <had-stop :shopinfo="shopData.shopinfo"></had-stop>
    </div>
    <div class="loading" v-show="!shopData.name">
      <div class="iconfont icon-Loading loading-icon"></div>
      <div class="loading-text">数据加载中</div>
    </div>
    
  </div>
</template>

<script>
import axios from 'axios'
import DishHeader from './components/header'
import foodsList from './components/foodsList'
import shopMenu from './components/menu'
import shopCart from './components/cart'
import shopWaiter from './components/waiter'
import hadStop from './components/hadStop'


export default {
  name: 'dishesList',
  components: {
    DishHeader,
    foodsList,
    shopMenu,
    shopCart,
    shopWaiter,
    hadStop
  },
  data() {
      return {
        shopData: {}
      }
  },
  mounted(){
    let id = this.getUrlParmas('id')
    axios.post('api/scan_info',{'id':id}).then( res => {
      console.log(res)
      if(res.data.code == 200) {
        this.shopData = res.data.data
        this.$store.commit('setShopData',res.data.data)
        let use_access = 5
        if(res.data.data.deskroomstatus.use_access == 2) {
          this.$showModal('您已申请使用该桌号，请耐心等待房桌管理员同意',false,false)
        }else if(res.data.data.deskroomstatus.use_access == 4) {
          this.$showModal('不好意思，房桌管理员不同意您使用',false,false)
        }else if(res.data.data.deskroomstatus.use_access == 5) {
          let that = this
          that.$showModal('该房桌已被使用，是否申请同桌？',true,false,function() {
            axios.post('api/scan_eating_in',{'id':id}).then( res => {
                console.log(res)
                if(res.data.code == 200) {
                  that.$router.go(0)
                }else {
                  that.$toast(res.data.info)
                }
                
              }).catch( error => {
                console.log(error)
              })
          },function(){},'立即申请')
        }else if(res.data.data.deskroomstatus.use_access == 6) {
          this.$showModal('该房桌已被占用，请换空桌！',false,false)
        }else if(res.data.data.deskroomstatus.use_access == 7) {
          this.$showModal('有人要申请使用该房桌,请到申请同桌页面查看！',true,false,function(){})
          // let that = this
          // axios.post('api/scan_need_agree',{'id':id}).then( res => {
          //   console.log(res)
          //   that.$showModal(res.data.data.user.name+'要申请使用该房桌，是否同意?',true,true,function() {
          //       //同意
          //       axios.post('api/scan_sure_in',{'id':id,'applicant_id':res.data.data.applicant_id,'agree':1}).then( res => {
          //         console.log(res)
          //         //that.$router.go(0)
          //         that.$toast(res.data.info)
          //       }).catch( error => {
          //         console.log(error)
          //       })
          //     },function() {
          //       //不同意
          //       axios.post('api/scan_sure_in',{'id':id,'applicant_id':res.data.data.applicant_id,'agree':2}).then( res => {
          //         console.log(res)
          //         //that.$router.go(0)
          //         that.$toast(res.data.info)
          //       }).catch( error => {
          //         console.log(error)
          //       })
          //     },'同意','不同意')
          //   }).catch( error => {
          //     console.log(error)
          //   })
        }
      }else {
        this.$showModal(res.data.info,false,false,function() {},function() {})
      }
    }).catch( error => {
      console.log(error)
    })
    this.$store.commit('getId',id)
  },
  methods: {
    handleAdd(e) {
      this.$nextTick(() => {
          this.$refs.shopcart.drop(e);
      });
    },
    getUrlParmas(name) {
      let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
      let r = window.location.search.substr(1).match(reg);
      if(r!=null)
      return unescape(r[2]);
      return null;
    },
  }
} 
</script>

<style lang="stylus" scoped>
@import "~styles/common.styl"
  .foods-list
    position absolute
    top: 132px
    bottom: 0px
    width: 100%
    overflow: hidden
  .nav
    position: fixed;
    z-index: 19;
    right: 15px;
    bottom: 15px;
    left: 15px;
    height: 0.8rem;
    display flex
    justify-content space-between
  .loading
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    display flex
    justify-content center
    align-items center
    flex-direction column
    z-index 10000
    background #fff
    .loading-icon
      font-size 36px
      animation:loading 1.5s linear infinite;
      transform-origin center center
      @keyframes loading
      {
        from {transform: rotateZ(0deg)}
        to {transform: rotateZ(360deg)}
      }
      color $themeColor
    .loading-text
      font-size 16px
      margin-top 10px
      color #666
</style>
